<template>
    <div class='container'>

        <div class="search-content">
            <t-table row-key="index" :data="data" :columns="columns" :stripe="stripe" :bordered="bordered"
                :hover="hover" :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :pagination="pagination"
                :show-header="showHeader" cell-empty-content="-" resizable lazy-load @row-click="handleRowClick">
            </t-table>
        </div>
    </div>
</template>``
<script lang="ts" setup>
import { ref, h } from 'vue';
import type { TableProps } from 'tdesign-vue-next';

// 静态数据（不再动态生成，直接写死）
const data: TableProps['data'] = [
    {
        index: 1,
        applicant: '贾明',
        channel: '电子签署',
        detail: { email: 'w.cezkdudy@lhll.au' },
        matters: '宣传物料制作费用',
        time: 2,
        createTime: '2022-01-01',
    },
    {
        index: 2,
        applicant: '张三',
        channel: '纸质签署',
        detail: { email: 'r.nmgw@peurezgn.sl' },
        matters: 'algolia 服务报销',
        time: 3,
        createTime: '2022-02-01',
    },
    {
        index: 3,
        applicant: '王芳',
        channel: '纸质签署',
        detail: { email: 'p.cumx@rampblpa.ru' },
        matters: '相关周边制作费',
        time: 1,
        createTime: '2022-03-01',
    },
    {
        index: 4,
        applicant: '贾明',
        channel: '电子签署',
        detail: { email: 'w.cezkdudy@lhll.au' },
        matters: '激励奖品快递费',
        time: 4,
        createTime: '2022-04-01',
    },
    {
        index: 5,
        applicant: '张三',
        channel: '纸质签署',
        detail: { email: 'r.nmgw@peurezgn.sl' },
        matters: '宣传物料制作费用',
        time: 2,
        createTime: '2022-05-01',
    },
    // 可根据需要继续添加，这里保留5条示例（原 total=28，但你可自行决定）
];

const stripe = ref(false);
const bordered = ref(false);
const hover = ref(true);
const tableLayout = ref(false);
const size = ref<TableProps['size']>('small');
const showHeader = ref(true);

// 移除了 status 列
const columns = ref<TableProps['columns']>([
    {
        colKey: 'applicant',
        title: '申请人',
        width: '100',
    },
    {
        colKey: 'channel',
        title: '签署方式',
    },
    {
        colKey: 'detail.email',
        title: '邮箱地址',
        ellipsis: true,
    },
    {
        colKey: 'createTime',
        title: '申请时间',
    },
]);

const handleRowClick: TableProps['onRowClick'] = (e) => {
    console.log(e);
};

// 添加ref后，访问api，改变total，data的改变才会显示
const pagination: TableProps['pagination'] = {
    defaultCurrent: 1,
    defaultPageSize: 5,
    total: data.length, // 使用实际数据长度
};
</script>
<style lang='scss' scoped>
.container {
    width: 70%;
    margin: 50px auto;
}
</style>


<!-- === -->
<!-- // @ts-ignore
const data = ref<TableDataType[]>([]);
const pagination = ref<TableProps['pagination']>({
    defaultCurrent: 1,
    defaultPageSize: 15,
    total: 0,
}); -->